<script setup="props, { emit }">
  import {ref,reactive,onUnmounted,computed,watchEffect} from "vue"
  const state=reactive({
    count:0
  })
  const count1=ref(0)
  const addCount=()=>{
    count1.value++
  }
  const how=computed(()=>{
    return count1.value;
  })
  watchEffect(()=>{ 
    console.log(count1.value);
  })
  const timer=setInterval(()=>{
    state.count++
  },1000)
  
  onUnmounted(() => {
    clearInterval(timer)
  })
 const name=ref("")

</script>

<template>
 <div class="app">
  <input type="text" v-model="name">
  {{name}}
  <div>{{state.count}}</div>
  <input type="text" v-model="count1">
  <div>{{0}}----{{how}}</div>
  <button @click="addCount"></button>
 </div>
</template>

<style scoped>
  *{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }
</style>
